<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>table导航练习</title>

    <style>
        td
        {
            border: 1px solid #000;
            padding: 10px 8px;
        }

        table
        {
            border-collapse: collapse;
        }
        
        .active
        {
            color: #fff;
            background-color: red;
        }

    </style>

</head>

<body>
    <script>

        //写入元素
        document.write("<table>");
        for (var i = 1; i <= 5; i++) 
        {
             document.write("<tr>");

             for(var j = 1;j<=5;j++)
             {
                document.write("<td>");
                document.write(`${j}:${i}`);
                document.write("</td>");
             }

             document.write("</tr>");
        }
        document.write("</table>");
       
        //选择元素然后加入样式
        //找到所有的tr元素，会返回一个列表
        var trEls = document.querySelectorAll("tr");
        //将对应位置添加上特定的样式
        for(var i = 0;i<5;i++)
        {
           
           trEls[i].children[i].className = "active";
            
        }
        console.log(trEls);

    </script>
</body>

</html>